<template>
  <div class="searchpopup">
    <van-search
      v-model="SearchValue"
      show-action
      :placeholder="placeholdervalue"
      @search="onSearch"
      @cancel="onCancel"
      @input="inputchange(value)"
    />
    <history-hot
      v-if="blockShow === 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @handelTagClick="handelTagClick"
    ></history-hot>
    <SearchListTip
      v-else-if="blockShow === 2"
      :searchList="SearchList"
      @handelSearchListClick="handelSearchListClick"
    ></SearchListTip>
    <SearchProducts
      v-else
      :goodsList="goodsList"
      :fliterCategroy="fliterCategroy"
      @categroychange="categroychange"
      @PriceChange="PriceChange"
    ></SearchProducts>
  </div>
</template>

<script>
import HistoryHot from '../components/HistoryHot.vue'
import {
  GETSearchData,
  GETSearchTipsListData,
  GETGoodsListData
} from '../request/api.js'
import SearchListTip from '../components/SearchListTip.vue'
import SearchProducts from '../components/SearchProducts.vue'
export default {
  name: 'SearchPopup',
  data() {
    return {
      SearchValue: '',
      //
      placeholdervalue: '',
      // 值可以为 1为表示热门搜索和历史记录
      //  2   表示为搜索展示的提示列表
      // 3  表示收缩的产品内容
      blockShow: 1,
      historyKeywordList: [],
      hotKeywordList: [],
      SearchList: [],
      // 搜索产品的分类
      fliterCategroy: [],
      // 搜索的产品的列表数据
      goodsList: [],
      // 价格排序
      order: 'desc',
      // 分类id
      categordId: 0,
      // 默认的搜索方式
      sort: 'id'
    }
  },
  components: {
    HistoryHot,
    SearchListTip,
    SearchProducts
  },
  created() {
    GETSearchData().then(res => {
      if (res.errno === 0) {
        this.placeholdervalue = res.data.defaultKeyword.keyword
        const { historyKeywordList, hotKeywordList } = res.data
        this.historyKeywordList = historyKeywordList
        this.hotKeywordList = hotKeywordList
      }
    })
  },
  methods: {
    onSearch(val) {
      this.blockShow = 3
      GETGoodsListData({
        keyword: val,
        page: 1,
        size: 20,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort
      }).then(res => {
        if (res.errno === 0) {
          const { filterCategory, goodsList } = res.data
          const newArr = JSON.parse(
            JSON.stringify(filterCategory)
              .replace(/name/g, 'text')
              .replace(/id/g, 'value')
          )
          this.fliterCategroy = newArr
          this.goodsList = goodsList
        }
      })
    },
    onCancel() {
      this.$router.go(-1)
    },
    // 输入框内容发生变化的时候发送请求
    inputchange(value) {
      this.blockShow = 2
      GETSearchTipsListData(value).then(res => {
        if (res.errno === 0) {
          const { data } = res
          this.SearchList = data
        }
      })
    },
    categroychange(value) {
      this.categoryId = value
      this.onSearch(this.SearchValue)
    },
    PriceChange(value) {
      this.order = value
      this.sort = 'price'
      this.onSearch(this.SearchValue)
    },
    // 历史记录点击搜索
    handelTagClick(value) {
      // 改变上面搜索框的值，后面在给排序的时候调用priceChange（）函数
      this.SearchValue = value
      this.onSearch(value)
    },
    handelSearchListClick(value) {
      this.SearchValue = value
      this.onSearch(value)
    }
  }
}
</script>

<style lang="less" scoped>
.searchpopup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: #efefef;
}
</style>
